<template>
	<view class="wrap">
		<view class="btn_body">
			<view class="btn_send" @click="nav_to(`/pages/store/diary/sendDiary?id=${ID}`)">
				发布种养日志
			</view>
		</view>
		
		<view class="content" v-if="DayList.length">
			<view class="content_cell" v-for="(item,index) in DayList" :key="index">
				<view class="content_time">
					<view class="date_time">
						{{$util.timeChangeY_MD(item.CreateTime).date}}
					</view>
					<view class="year">
						{{$util.timeChangeY_MD(item.CreateTime).year}}
					</view>
				</view>
				<view class="content_line">
					<view class="line_round">
						
					</view>
					<view class="line" v-if="index<2">
						
					</view>
				</view>
				<view class="content_main">
					<view class="main_titbox">
						{{$util.entitiesToUtf16(item.Content)}}
					</view>
					<view class="main_img" v-if="ImgSplitFun(item.Imgs).length && !item.IsVideo">
						<view class="img_box" v-for="(el,i) in ImgSplitFun(item.Imgs)" :key="index" @click="$util.LookImg(ImgSplitFun(item.Imgs),index)">
							<image :src="el" mode="aspectFill"></image>
						</view>
					</view>
					<view class="main_video" v-if="ImgSplitFun(item.Imgs).length && item.IsVideo">
						<block v-for="(el,i) in ImgSplitFun(item.Imgs)" :key="i">
							<video :src="el"></video>
						</block>
					</view>
					<view class="content_btn">
						<view class="content_btnCell" @click="delDiaryFun(item)">
							删除
						</view>
					</view>
				</view>
			</view>
		</view>
		<block v-else>
		    <EmptyBox text="暂无数据"></EmptyBox>
		    <BtmLogo></BtmLogo>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ID:'',
				DayList:[]
			};
		},
		onLoad(e) {
			this.ID = e.id || ''
			uni.$on('updateDiary',()=>{
				this.GrowList()
			})
			this.GrowList()
		},
		onUnload() {
			uni.$off('updateDiary')
		},
		methods:{
			async GrowList(){
				let res = await this.$api.post('ProductTrack/GrowList',{
					ProductID:this.ID
				})
				if(res.code==0){
					this.DayList = res.data
				}else{
					this.$u.toast(res.message)
				}
			},
			ImgSplitFun(img) {
				if (img) {
					if (img.includes("[")) {
						return JSON.parse(img)
					} else {
						return img.split(',')
					}
				}
				return []
			},
			delDiaryFun(item){
				uni.showModal({
					title:'提示',
					content:'是否确认删除该日志？',
					success: async (res) => {
						if(res.confirm){
							let rex = await this.$api.post('ProductTrack/DeleteGrow',{ID:item.ID})
							if(rex.code==0){
								this.$u.toast('删除成功')
								this.GrowList()
							}else{
								this.$u.toast(res.message)
							}
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.wrap{
	padding: 24rpx;
	.btn_body{
		.btn_send{
			width: 100%;
			height: 74rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50rpx;
			font-size: 28rpx;
			color: #fff;
			
			letter-spacing: 2px;
			font-weight: bold;
			overflow: hidden;
			background: linear-gradient(98deg, #FFAD26 0%, #FE4E01 100%);
		}
	}
	.content{
		margin-top: 24rpx;
		.content_cell{
			display: flex;
			.content_time{
				display: flex;
				flex-direction: column;
				align-items: center;
				.date_time{
					font-size: 24rpx;
					margin-bottom: 4rpx;
				}
				.year{
					font-size: 20rpx;
				}
			}
			.content_line{
				width: 10%;
				display: flex;
				flex-direction: column;
				align-items: center;
				.line_round{
					width: 24rpx;
					height: 24rpx;
					min-height: 24rpx;
					min-width: 24rpx;
					border-radius: 50%;
					background-color: #FE4E01;
					display: flex;
					align-items: center;
					justify-content: center;
					&::after{
						content: '';
						width: 35%;
						height: 35%;
						border-radius: 50%;
						background-color: #fff;
					}
				}
				.line{
					width: 8rpx;
					height: calc(100% - 24rpx);
					background-color: #FE4E01;
				}
			}
			.content_main{
				flex: 1;
				.main_titbox{
					font-size: 28rpx;
					color: #111;
					margin-bottom: 14rpx;
				}
				.main_img{
					display: flex;
					flex-wrap: wrap;
					.img_box{
						
						width: 132rpx;
						height: 132rpx;
						margin-right: 12rpx;
						margin-bottom: 12rpx;
						&:nth-child(4n){
							margin-right: 0;
						}
						&:nth-child(n+5){
							margin-bottom: 0;
						}
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
				.main_video{
					width: 100%;
					height: 280rpx;
					video{
						width: 100%;
						height: 100%;
					}
				}
				.content_btn{
					display: flex;
					justify-content: flex-end;
					.content_btnCell{
						font-size: 24rpx;
						padding: 24rpx 24rpx 12rpx;
						padding-right: 0;
						color: #FE4E01;
					}
				}
			}
		}
	}
}
</style>
